<template>
  <div class="Bussiness" style="border:white solid 0px ">
    <!--    <el-page-header @back="goBack" content="门店管理">-->
    <!--    </el-page-header>-->
    <div>
      客户姓名:
      <el-input v-model="customName" placeholder="请输入内容" style="width:150px;margin-right: 15px"></el-input>
      客户电话:
      <el-input v-model="customPhone" placeholder="请输入内容" style="width:150px;margin-right: 15px"></el-input>
      <el-button @click="es">搜索</el-button>
    </div>
    <div style="border:white solid 0px ">
      <el-table
          :data="tableData"
          height="250"
          border
          style="width: 100%">
        <el-table-column
            prop="realName"
            label="客户名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="客户性别"
            width="180">
        </el-table-column>
        <el-table-column
            prop="orderMoney"
            label="消费总金额">
        </el-table-column>
        <el-table-column
            prop="orderNum"
            label="消费总单数">
        </el-table-column>
        <el-table-column
            prop="deal"
            label="操作">
          <template slot-scope="scope">
            <el-button @click="query(scope.row.code)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
        title="客户信息"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose">
      <div style="width: 800px;margin-right: 200px">
        <div>
          <h3>客户基本信息</h3><br>
          客户姓名：
          <span>{{ custom }}</span>

          性别：
          <span>{{ sex }}</span>

          联系电话：
          <span>{{ phone }}</span>
          <br>
          <hr>


        </div>
        <div><h3>销售统计</h3>

          <el-date-picker
              v-model="countTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          <el-button type="success" @click="queryOrder">查询</el-button>
          <br>
          今日单数：
          <span>{{ todayNum }}</span>
          今日金额：
          <span>{{ todayMoney }}</span>
          当月单数：
          <span>{{ monthNum }}</span>
          当月金额：
          <span>{{ monthMoney }}</span>
          <hr>
        </div>

        <div>
          <h3>订单详情</h3>
          <el-table
              :data="tableData1"
              height="250"
              border
              style="width: 100%">
            <el-table-column
                prop="number"
                label="订单编号"
                width="100">
            </el-table-column>
            <el-table-column
                prop="allMoney"
                label="订单总价"
                width="100">
            </el-table-column>
            <el-table-column
                prop="finishTime"
                label="完成时间"
                width="150">
            </el-table-column>
            <el-table-column
                label="订单详情">
              <template slot-scope="scope">
                <!--                            <el-button @click="query(scope.row.details)" type="text" size="small">查看</el-button>-->
                <span v-for="item in scope.row.details" :key="item">{{ item.name }}×{{ item.num }}  {{ item.price }}<br></span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: 'User',
  data() {
    return {
      tableData: [],
      tableData1: [],

      riderName: "",
      start: "",
      end: "",
      value: "",
      options: [{
        value: '男',
        label: '男'
      }, {
        value: '女',
        label: '女'
      }],

      customName: "",
      customPhone: "",

      dialogVisible: false,
      businessCode: "",

      custom: "",
      sex: "",
      phone: "",

      countTime: "",
      todayNum: "",
      todayMoney: "",
      monthNum: "",
      monthMoney: "",

    }
  },
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.axios.get("back/customer/findByItem").then(
          r => {
            this.tableData = r.data;
          }
      )
    },
    es() {
      // console.log(this.value)
      this.axios.get("back/customer/findByItem", {
        params: {
          realName: this.customName,
          phone: this.customPhone,
        }
      }).then(
          r => {
            this.tableData = r.data;
            this.customName = "";
            this.phone = "";
          }
      )
    },

    query(businessId) {
      this.businessCode = businessId;
      this.dialogVisible = true;
      this.queryRider(businessId);

    },
    queryRider(businessId) {
      this.axios.get("back/customer/findById", {params: {id: businessId}}).then(
          r => {
            this.custom = r.data.realName;
            this.sex = r.data.sex;
            this.phone = r.data.phone;
          }
      )
    },
    queryOrder() {
      // console.log(this.businessCode);
      // console.log(this.countTime);
      this.queryOrderInfo()
      this.axios.get("back/order/orderCount", {
        params: {
          code: this.businessCode,
          time: this.countTime,
          who: "custom",
        }
      }).then(
          r => {
            this.todayNum = r.data.todayNum;
            this.todayMoney = r.data.todayMoney;
            this.monthNum = r.data.monthNum;
            this.monthMoney = r.data.monthMoney;
          }
      )
    },
    queryOrderInfo() {
      this.axios.get("back/order/orderInfo", {
        params: {
          code: this.businessCode,
          time: this.countTime,
          who: "custom",
        }
      }).then(
          r => {
            this.tableData1 = r.data;
          }
      )
    },
    handleClose() {
      this.dialogVisible = false;
      this.countTime = "";
      this.todayNum = "";
      this.todayMoney = "";
      this.monthNum = "";
      this.monthMoney = "";
      this.tableData1 = [];

    },

  }
}
</script>


<style scoped>
div {
  border: black solid 1px;
  margin: 2px 2px 2px 2px
}

span {
  margin-right: 5px;
  margin-top: 5px;
}
</style>